<template>
	<div class="login-container">
		<div class="left">
			<div class="title-box">
				<img src="@/assets/img/login_icon.png" alt="" />
				<div class="title">黑马面面</div>
				<div class="line"></div>
				<div class="sub-title">用户登录</div>
			</div>
			<!-- 表单 -->
			<el-form :model="ruleForm" status-icon :rules="rules" ref="form" class="demo-ruleForm">
				<!-- 手机号 -->
				<el-form-item prop="phone">
					<el-input v-model="ruleForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input
						v-model="ruleForm.password"
						show-password
						placeholder="请输入密码"
						prefix-icon="el-icon-lock"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<!-- 验证码 -->
				<el-row>
					<el-col :span="16">
						<el-form-item prop="code">
							<el-input v-model.number="ruleForm.code" placeholder="请输入验证码" prefix-icon="el-icon-key"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<img @click="randomVerificationCode" class="codeImg" :src="verificationCode" alt="" />
					</el-col>
				</el-row>
				<!-- 同意啥啥啥的协议 -->
				<div class="agreement">
					<el-form-item prop="type">
						<el-checkbox-group v-model="ruleForm.type">
							<el-checkbox name="type"
								>我已阅读并同意<a href="http://www.baidu.com">用户协议</a>和<a href="http://www.baidu.com"
									>隐私条款</a
								></el-checkbox
							>
						</el-checkbox-group>
					</el-form-item>
				</div>
				<!-- 登录按钮 -->
				<div class="loginButton">
					<el-button type="primary" @click="login">登录</el-button>
				</div>
				<!-- 注册按钮 -->
				<div class="loginButton">
					<router-link to="/register">
						<el-button type="primary" @click="dialogVisibleShow">注册</el-button>
					</router-link>
				</div>
			</el-form>
		</div>
		<!-- 右侧图片 -->
		<div class="right">
			<img src="@/assets/img/login_bg.png" alt="" />
		</div>
		<Register ref="dialogVisible"></Register>
	</div>
</template>

<script>
import Register from './register';
export default {
	name: 'login',
	components: {
		Register,
	},
	data() {
		// 自定义效验规则
		let verifiedRCode = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('验证码不能为空'));
			} else {
				if (value.toString().length != 4) {
					callback(new Error('验证码长度在 4 个字符'));
					return;
				}
				callback();
			}
		};
		let verifiedPhone = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('手机号不能为空'));
			}
			const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
			if (!reg.test(value)) {
				callback(new Error('手机号不合法'));
				return;
			}
			callback();
		};
		return {
			verificationCode: process.env.VUE_APP_BASEURL + '/captcha?type=sendsms', // 验证码
			// 表单数据
			ruleForm: {
				phone: '18511111111', // 手机号
				password: '12345678', // 密码
				code: '', // 验证码
				type: [], // 同意啥啥啥的协议
			},
			// 表单规则
			rules: {
				phone: [
					// { required: true, message: '请输入手机号', trigger: 'blur' },
					// { min: 9, max: 11, message: '手机号长度在 9 到 11 个字符', trigger: 'blur' },
					{
						validator: verifiedPhone,
						trigger: 'blur',
					},
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' },
				],
				code: [
					{ required: true, message: '请输入验证码', trigger: 'blur' },
					{ validator: verifiedRCode, trigger: 'blur' },
				],
				type: [
					{
						required: true,
						message: '搞咩啊???你必须勾选, 别无选择!!!',
						// validator: checked,
						trigger: 'change',
					},
				],
			},
		};
	},
	mounted() {
		this.randomVerificationCode();
	},
	methods: {
		dialogVisibleShow() {
			this.$refs.dialogVisible.dialogVisible = true;
		},
		randomVerificationCode() {
			this.verificationCode = process.env.VUE_APP_BASEURL + '/captcha?type=login&suiji=' + Date.now();
		},
		login() {
			this.$refs.form.validate(async (valid) => {
				// valid 要么是true, 要么是false
				if (!valid) {
					return;
				}

				// 发请求
				const res = await this.$axios.post('/login', this.ruleForm);
				console.log(res);
				if (res.code === 200) {
					// 成功
					this.$message({
						showClose: true, // 显示关闭
						message: '登录成功!', // 提示信息
						type: 'success', // 类型
					});

					// 保存token
					localStorage.setItem('heimamm66-token', res.data.token);

					// 跳转到 layout
					this.$router.push({
						path: '/layout',
					});
				} else {
					// 提示错误信息
					// this.$message.error(res.data.message)
					this.$message({
						showClose: true, // 显示关闭
						message: res.message, // 提示信息
						type: 'error', // 类型
						duration: 1000,
					});
					// 刷新验证码
					this.randomVerificationCode();
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
a {
	color: #1493fa;
	text-decoration: none;
}
.login-container {
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 14px;
	justify-content: space-around;
	background: linear-gradient(225deg, #1493fa, #01c6fa);
	.left {
		width: 478px;
		height: 550px;
		background: #f5f5f5;
		padding: 48px;
		.codeImg {
			width: 100%;
			height: 40px;
			margin-left: 15px;
		}
		.loginButton .el-button {
			width: 100%;
			margin-top: 20px;
		}
		.title-box {
			display: flex;
			align-items: center;
			margin-bottom: 30px;
			img {
				width: 22px;
				height: 17px;
				margin-right: 16px;
			}
			.title {
				font-size: 24px;
				margin-right: 14px;
			}
			.line {
				width: 1px;
				background-color: #c7c7c7;
				height: 27px;
				margin-right: 12px;
			}
			.sub-title {
				font-size: 22px;
			}
		}
	}
}
</style>
